<template>
  <view class="register-container">
    <view class="register-header">
      <view class="logo">🤖</view>
      <view class="title">用户注册</view>
      <view class="subtitle">创建您的账号</view>
    </view>

    <view class="register-form">
      <view class="form-item">
        <input 
          class="input" 
          v-model="form.username" 
          placeholder="请输入用户名"
          type="text"
        />
      </view>
      
      <view class="form-item">
        <input 
          class="input" 
          v-model="form.email" 
          placeholder="请输入邮箱"
          type="email"
        />
      </view>
      
      <view class="form-item">
        <input 
          class="input" 
          v-model="form.password" 
          placeholder="请输入密码"
          type="password"
        />
      </view>
      
      <view class="form-item">
        <input 
          class="input" 
          v-model="form.confirmPassword" 
          placeholder="请确认密码"
          type="password"
        />
      </view>

      <button class="register-btn" @click="handleRegister" :disabled="loading">
        {{ loading ? '注册中...' : '注册' }}
      </button>

      <view class="login-link">
        <text @click="goToLogin">已有账号？立即登录</text>
      </view>
    </view>

    <view class="register-footer">
      <text class="footer-text">注册后即可使用所有功能</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
      loading: false
    }
  },
  methods: {
    async handleRegister() {
      // 表单验证
      if (!this.form.username || !this.form.email || !this.form.password || !this.form.confirmPassword) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }

      if (this.form.password !== this.form.confirmPassword) {
        uni.showToast({
          title: '两次密码不一致',
          icon: 'none'
        })
        return
      }

      if (this.form.password.length < 6) {
        uni.showToast({
          title: '密码长度至少6位',
          icon: 'none'
        })
        return
      }

      this.loading = true
      try {
        const response = await uni.request({
          url: 'http://localhost:5000/api/auth/register',
          method: 'POST',
          data: {
            username: this.form.username,
            email: this.form.email,
            password: this.form.password
          }
        })

        if (response.statusCode === 200) {
          uni.showToast({
            title: '注册成功',
            icon: 'success'
          })

          // 跳转到登录页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          throw new Error(response.data.error || '注册失败')
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '注册失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    goToLogin() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.register-container {
  padding: 60rpx 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.register-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.logo {
  font-size: 120rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.register-form {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  backdrop-filter: blur(10rpx);
}

.form-item {
  margin-bottom: 30rpx;
}

.input {
  width: 540rpx;
  padding: 30rpx;
  border-radius: 15rpx;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  font-size: 28rpx;
  color: #333;
}

.register-btn {
  width: 100%;
  padding: 30rpx;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 15rpx;
  font-size: 32rpx;
  margin-bottom: 30rpx;
}

.register-btn:disabled {
  background: #ccc;
}

.login-link {
  text-align: center;
}

.login-link text {
  color: white;
  font-size: 28rpx;
  text-decoration: underline;
}

.register-footer {
  text-align: center;
  margin-top: 60rpx;
}

.footer-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 24rpx;
}
</style> 